<!DOCTYPE html>
<html lang="zh-CN"><head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <!-- Meta, title, CSS, favicons, etc. -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="一个非侵入式、不会破坏原来静态页面结构、可被浏览器正确显示的、格式良好的前端HTML模板解析引擎">
    <meta name="author" content="">

    <title>

        domTemplate 文档

    </title>

    <!-- Bootstrap core CSS -->
    <link href="http://cdn.bootcss.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
    <link href="css/docs.css" rel="stylesheet">
    <link href="css/prettify.css" rel="stylesheet">
    <!-- Optional Bootstrap Theme -->
    <link href="data:text/css;charset=utf-8," data-href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet" id="bs-theme-stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>
<body onload="prettyPrint()">

<!-- Docs page layout -->
<div class="docs-header" id="content" tabindex="-1">
    <div class="container">
        <h1>domTemplate</h1>
        <p>一个非侵入式、不会破坏原来静态页面结构、可被浏览器正确显示的、格式良好的前端HTML模板解析引擎</p>
    </div>
</div>

<div class="container">

    <div class="row">
        <div class="col-md-9" role="main">
            <div class="docs-section">

                <h2 id="js-h-over">概述</h2>
                <p>
                    这是一个非侵入式、不会破坏原来静态页面结构、可被浏览器正确显示的、格式良好的前端HTML模板解析引擎。
                </p>

                <p>
                    传统MVC开发模式，V层使用服务器端渲染。美工设计好静态HTML文件，交给后端工程师，需要转换成
                    <code>Jsp、Freemarker、Velocity</code>等动态模板文件。这种模式有几个缺点
                    <br/>
                    <br/>
                    <strong>1、动态模板文件不能被浏览器解释、必须要运行在服务器中才能显示出效果</strong>
                    <br/>
                    <strong>2、动态效果和静态效果分别存在不同文件，美工和后端工程师需要分别维护各自页面文件，其中一方需要修改页面，都需要通知另一方进行修改</strong>
                    <br/>
                    <strong>3、页面数据不能分块加载、获取跨域数据比较麻烦</strong>
                </p>
                <p>
                    <code>domTemplate</code> 模板引擎是通过在标签中添加自定义属性，实现动态模板功能，当没有引入<code>domTemplate</code>脚本，
                    则自定义标签属性不会被浏览器解析，不会破坏原有静态效果，当引入<code>domTemplate</code>脚本，模板引擎回去解析这些标签属性，
                    并加载数据进行动态渲染。
                    下图：对比服务器页面渲染和使用<code>domTemplate</code>前端引擎开发流程
                </p>

                <div class="highlight">
                   <a href="images/before.jpg" target="_blank"> <img  src="images/before.jpg" width="49%"/></a>
                    <a href="images/after.jpg" target="_blank"> <img  src="images/after.jpg" width="49%"/></a>
                </div>

                <h2 id="js-h-user">用法</h2>
                <p>
                    导入<code>jquery.js</code>或者<code>zepto.js</code>和<code>domTemplate.min.js</code>
                    <a target="_blank" href="../examples/render_all.html">示例</a>
                </p>
                <div class="highlight">
                    <pre class="prettyprint"><code class="language-js" data-lang="js">
                        $(function () {<br/>
                        $.domTemplate.init(options,callback);//可以通过selector指定根节点，默认根节点是body,表示从body开始，渲染整个页面
                        <br/>
                        });
                    </code></pre>
                </div>
                <p>或者解析某一个html片段。<a target="_blank" href="../examples/render_fragment.html">示例1</a> <a target="_blank" href="../examples/render_fragment2.html">示例2</a> </p>
                <div class="highlight">
                    <pre class="prettyprint"><code class="language-js" data-lang="js">
                        $('selector').domTemplate(options,callback);//渲染数据是通过h-model 自动去获取数据，也可以通过data指定全局数据
                    </code></pre>
                </div>
                <h3 id="js-ctx-options">Options</h3>
                <div class="table-responsive">
                    <table class="table table-bordered table-striped js-options-table">
                        <thead>
                        <tr>
                            <th>Name</th>
                            <th>Type</th>
                            <th>Default</th>
                            <th>Description</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>selector</td>
                            <td>selector</td>
                            <td>body</td>
                            <td>根节点选择器</td>
                        </tr>
                        <tr>
                            <td>data</td>
                            <td>json</td>
                            <td>{}</td>
                            <td>渲染数据</td>
                        </tr>
                        <tr>
                            <td>prefix</td>
                            <td>string</td>
                            <td>h-</td>
                            <td>标签前缀</td>
                        </tr>
                        <tr>
                            <td>escape</td>
                            <td>boolean</td>
                            <td>true</td>
                            <td>是否转义</td>
                        </tr>
                        <tr>
                            <td>$parentElement</td>
                            <td>jquery或者zepto对象</td>
                            <td>$(selector)</td>
                            <td>当前上下文渲染父元素</td>
                        </tr>
                        <tr>
                            <td>$currentElement</td>
                            <td>jquery或者zepto对象</td>
                            <td>$parentElement</td>
                            <td>当前上下文渲染元素</td>
                        </tr>
                        <tr>
                            <td>before</td>
                            <td>function</td>
                            <td></td>
                            <td>在model渲染前执行,可以改变model属性</td>
                        </tr>
                        </tbody>
                    </table>
                </div>

                <h3>callback</h3>
                <p>模板渲染成功回调函数,<code>callback(model)</code>,所有需要等页面渲染成为做的逻辑需要注册这个回调函数，例如用<code>jquery.lazyload.js</code>实现图片懒加载</p>

                <h2 id="js-h-model">model标签</h2>
                <p>模板引擎通过<code>&lt;h-model&gt;</code>标签获取渲染数据,并把数据放到上下文<code>Context</code>中</p>

                <p>方式1(把h-model取数据放在任意标签):</p>
                <div class="highlight">
                    <pre class="prettyprint"><code class="language-html" data-lang="html">
                        &lt;body h-model="{user:{url:'http://localhost:8080/v/game/getUser'}}">&lt;
                        <br/>
                        &lt;a h-class="{user.type}" h-href="{user.pic}" h-text="{user.username}"&gt;xxx1&lt;/a&gt;
                        <br/>
                        /body&gt;</code></pre>
                </div>

                <p>方式2(把h-model取数据放在任意标签,可以连续取多个Model数据):</p>
                <div class="highlight">
                    <pre class="prettyprint"><code class="language-html" data-lang="html">
                        &lt;div h-model="{user:{url:'http://localhost:8080/v/game/getUser'},users:{type:'get',url:'http://localhost:8080/v/game/getUsers'}}">
                        <br/>
                        &lt;a h-class="{user.type}" h-href="{user.pic}" h-text="{user.username}"&gt;xxx1&lt;/a&gt;
                        <br/>
                        &lt;/div&gt;
                    </code></pre>
                </div>

                <p>方式3(把h-model取数据放在任意标签,不同块数据相互不影响):</p>
                <div class="highlight">
                    <pre class="prettyprint">
                        <code class="language-html" data-lang="html">
                            &lt;div h-model="{user1:{url:'http://localhost:8080/v/game/getUser?id=5'}}">
                            <br/>
                            &lt;a h-class="{user1.type}" h-href="{user1.pic}" h-text="{user1.username}"&gt;xxx1&lt;/a&gt;
                            <br/>
                            &lt;/div&gt;
                            <br/>
                            &lt;div h-model="{user2:{url:'http://localhost:8080/v/game/getUser?id=6'}}">
                            <br/>
                            &lt;a h-class="{user2.type}" h-href="{user2.pic}" h-text="{user2.username}"&gt;xxx1&lt;/a&gt;
                            <br/>
                            &lt;/div&gt;
                        </code>
                    </pre>
                </div>

                <p>方式4(h-model标签可以嵌套使用):</p>
                <div class="highlight">
                    <pre class="prettyprint">
                        <code class="language-html" data-lang="html">
                            &lt;body&gt;
                            <br/>
                            &lt;div class="container"&gt;
                            <br/>
                            &lt;div class="table-responsive"  h-model="{data:{url:'http://api.huceo.com/txapi/chengyu/?key=0e70bfd01018c4404e24e68c73255d81&word=%E9%A9%AC%E5%88%B0%E6%88%90%E5%8A%9F'}}"&gt;
                            <br/>
                            &lt;h3 h-text="{data.newslist[0].chengyu}">成语</h3&gt;
                            <br/>
                            &lt;p>出处:&lt;span h-text="{data.newslist[0].diangu}"&gt;&lt;/span&gt;&lt;/p&gt;
                            <br/>
                            &lt;p>拼音:&lt;span h-text="{data.newslist[0].pinyin}"&gt;&lt;/span&gt;&lt;/p&gt;
                            <br/>
                            &lt;p>出处:&lt;span h-text="{data.newslist[0].chuchu}"&gt;&lt;/span&gt;&lt;/p&gt;
                            <br/>
                            &lt;p>范例:&lt;span h-text="{data.newslist[0].fanli}"&gt;&lt;/span&gt;&lt;/p&gt;
                            <br/>
                            &lt;div h-model="{data2:{url:'http://api.huceo.com/txapi/chengyu/?key=0e70bfd01018c4404e24e68c73255d81&word=%E6%97%97%E5%BC%80%E5%BE%97%E8%83%9C'}}"&gt;
                            <br/>
                            &lt;h4 h-text="[{data.newslist[0].chengyu}]相关同义词:{data2.newslist[0].chengyu}">成语&lt;/h4&gt;
                            <br/>
                            &lt;p&gt;出处:&lt;span h-text="{data2.newslist[0].diangu}"&gt;&lt;/span&gt;&lt;/p&gt;
                            <br/>
                            &lt;p&gt;拼音:&lt;span h-text="{data2.newslist[0].pinyin}"&gt;&lt;/span&gt;&lt;/p&gt;
                            <br/>
                            &lt;p&gt;出处:&lt;span h-text="{data2.newslist[0].chuchu}"&gt;&lt;/span&gt;&lt;/p&gt;
                            <br/>
                            &lt;p&gt;范例:&lt;span h-text="{data2.newslist[0].fanli}"&gt;&lt;/span&gt;&lt;/p&gt;
                            <br/>
                            &lt;/div&gt;
                            <br/>
                            &lt;/div&gt;
                            <br/>
                            &lt;/div&gt;
                            <br/>
                            &lt;/body&gt;
                        </code>
                    </pre>
                </div>

                <p>方式5(可以定义一个全局函数对model数据进行干预):</p>
                <div class="highlight">
                    <pre class="prettyprint">
                        <code class="language-html" data-lang="html">
                            &lt;body&gt;
                            <br/>
                            &lt;div class="container"&gt;
                            <br/>
                            &lt;div class="table-responsive"  h-model="{data:{render:'modelRender',url:'http://api.huceo.com/txapi/chengyu/?key=0e70bfd01018c4404e24e68c73255d81&word=%E9%A9%AC%E5%88%B0%E6%88%90%E5%8A%9F'}}"&gt;
                            <br/>
                            &lt;h3 h-text="{data.newslist[0].chengyu}">成语</h3&gt;
                            <br/>
                            <br/>
                            &lt;/div&gt;
                            <br/>
                            &lt;/div&gt;
                            <br/>
                            &lt;/body&gt;
                        </code>
                    </pre>
                    <p/>
                     <pre class="prettyprint">
                        <code class="javascript" data-lang="javascript">

                            function modelRender(modelName, res) {
                                <br/>
                                    console.info("model名称" + modelName);
                                <br/>
                                    console.info(res);
                                <br/>
                                    if(!res){//失败
                                <br/>
                                    return {error: '错误'};
                                <br/>
                                    }
                                <br/>
                                    if (modelName == 'data') {
                                    //可以对model数据进行修改
                                <br/>
                                    res.newslist[0].chengyu = res.newslist[0].chengyu + '(修改)';
                                <br/>
                                    return res;
                                <br/>
                                    }
                                <br/>
                            }
                        </code>
                    </pre>
                </div>

                <h2 >model标签作用域</h2>
                <p>只有model标签的子节点才能获得model数据，不同块model数据相互独立不影响，但是单个页面model名称还是建议不要相同</p>
                <br/>

                <p> <a target="_blank" href="../examples/test_model.html">model标签测试例子</a></p>

                <p> <a target="_blank" href="../examples/test_nest_model.html">嵌套model测试例子</a></p>

                <p> <a target="_blank" href="../examples/test_render_model.html">自定义修改model数据例子</a></p>

                <h3 >model请求参数</h3>
                <div class="table-responsive">
                    <table class="table table-bordered table-striped js-options-table">
                        <thead>
                        <tr>
                            <th>Name</th>
                            <th>Type</th>
                            <th>Default</th>
                            <th>Description</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>url</td>
                            <td>String</td>
                            <td></td>
                            <td>发送请求的地址。</td>
                        </tr>
                        <tr>
                            <td>dataType</td>
                            <td>String</td>
                            <td>json</td>
                            <td>json</td>
                        </tr>
                        <tr>
                            <td>data</td>
                            <td>String</td>
                            <td></td>
                            <td>发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后</td>
                        </tr>
                        <tr>
                            <td>type</td>
                            <td>String</td>
                            <td>POST</td>
                            <td>请求方式 ("POST" 或 "GET")</td>
                        </tr>
                        <tr>
                            <td>render</td>
                            <td>function</td>
                            <td></td>
                            <td>
                                /**
                                <br/>
                                * 定义一个全局函数对model数据进行干预
                                <br/>
                                * @param modelName model名称
                                <br/>
                                * @param res 原始model数据
                                <br/>
                                * @returns {*} 修改后的model数据
                                <br/>
                                */
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>

                <h2 id="js-h-reload-model">刷新model标签</h2>
                <p>可以通过<code> $.domTemplate.getModel([modelName])</code>方式获得对应对应model，然后调用reload方法，其所属页面块模板会自动刷新下</p>

                <h3 >model方法</h3>
                <div class="table-responsive">
                    <table class="table table-bordered table-striped js-options-table">
                        <thead>
                        <tr>
                            <th>Name</th>
                            <th>Type</th>
                            <th>Description</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>methods</td>
                            <td>object</td>
                            <td>设置model事件方法</td>
                        </tr>
                        <tr>
                            <td>setParamsData</td>
                            <td>object</td>
                            <td>设置URL请求参数，例如分页参数：{page: page}。</td>
                        </tr>
                        <tr>
                            <td>reload(options,callback)</td>
                            <td>object</td>
                            <td>
                                刷新， appendType=after：返回数据往原来的列表后面拼接；appendType=before：返回数据往原来的列表前面拼接；
                                //appendType=page：清除原来列表数据，添加返回数据；
                            </td>
                        </tr>

                        </tbody>
                    </table>
                </div>
                <p>例子</p>
                <div class="highlight">
                    <pre class="prettyprint"><code class="language-javascript" data-lang="javascript">
                        $.domTemplate.getModel('list1').setParamsData({page: page}).reload({appendType: 'page'}, function () {
                        console.info("加载完成")
                        // 设置flag
                        loading = false;
                        $("#page_num").text(page);
                        });

                    </code>
                    </pre>
                </div>

                <p> <a target="_blank" href="../examples/reload_model.html">刷新model例子1</a></p>
                <p> <a target="_blank" href="../examples/reload_model2.html">刷新model例子2</a></p>
                <p> <a target="_blank" href="../examples/reload_model3.html">刷新model例子3</a></p>

                <h2 id="js-h-attr">属性标签</h2>
                <p>可以把多个DOM标签用逗号分隔，解析后会把对应的标签属性替换</p>
                <div class="highlight">
                    model数据:
                    <pre class="prettyprint"><code class="language-json" data-lang="json">
                      {src:'http://www.wed114.cn/jiehun/uploads/allimg/160426/39_160426110624_1.jpg',title:'测试标题'}
                    </code></pre>
                    模板:
                    <pre class="prettyprint"><code class="language-html" data-lang="html">
                        &lt;img src="../../images/xx.png"
                             h-attr="src={img.src},title={img.title},alt={img.title}" /&gt;
                    </code></pre>
                </div>

                <p>渲染结果</p>
                <div class="highlight">
                    <pre class="prettyprint"><code class="language-html" data-lang="html">
                        &lt;img src="http://www.wed114.cn/jiehun/uploads/allimg/160426/39_160426110624_1.jpg" title='测试标题' alt='测试标题'
                        h-attr="src={img.src},title={img.title},alt={img.title}" /&gt;
                    </code></pre>
                </div>
                <p> <a target="_blank" href="../examples/attr.html">attr标签例子</a></p>

                <h2 id="js-h-other">其他属性标签</h2>
                <p>引擎除了支持<code>h-attr</code>这种方式：还支持以下替换标签写法。</p>
                <div class="table-responsive">
                    <table class="table table-bordered table-striped js-options-table">
                        <thead>
                        <tr>
                            <th>属性</th>
                            <th>引擎标签</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>text</td>
                            <td>h-text</td>
                        </tr>
                        <tr>
                            <td>value</td>
                            <td>h-val</td>
                        </tr>
                        <tr>
                            <td>href</td>
                            <td>h-href</td>
                        </tr>
                        <tr>
                            <td>src</td>
                            <td>h-src</td>
                        </tr>
                        <tr>
                            <td>src</td>
                            <td>h-src</td>
                        </tr>
                        <tr>
                            <td>class</td>
                            <td>h-class</td>
                        </tr>
                        <tr>
                            <td>style</td>
                            <td>h-css</td>
                        </tr>
                        <tr>
                            <td>width</td>
                            <td>h-width</td>
                        </tr>
                        <tr>
                            <td>height</td>
                            <td>h-height</td>
                        </tr>
                        <tr>
                            <td>id</td>
                            <td>h-id</td>
                        </tr>
                        <tr>
                            <td>title</td>
                            <td>h-title</td>
                        </tr>
                        <tr>
                            <td>alt</td>
                            <td>h-alt</td>
                        </tr>
                        </tbody>
                    </table>
                </div>


                <div class="highlight">
                    <pre class="prettyprint"><code class="language-html" data-lang="html">&lt;a h-class="{user.type}" h-href="{user.pic}" h-text="{user.username}"&gt;xxx1&lt;/a&gt;</code></pre>
                </div>
                <p>渲染结果</p>
                <div class="highlight">
                    <pre class="prettyprint"><code class="language-html" data-lang="html">&lt;a class='uType' href='http://www.baidu.com/20.jpg' h-class="{user.type}" h-href="{user.pic}" h-text="{user.username}"&gt;李华明&lt;/a&gt;</code></pre>
                </div>
                <p>
                    如果还需要支持其他标签属性，可以通过<code>$.domTemplate.registerSupportAttr(attrName)</code>进行添加。
                </p>

                <h2 id="js-h-html">html标签</h2>
                <p>该标签解析结果会显示在对应标签的html位置</p>
                <div class="highlight">
                    <pre class="prettyprint"><code class="language-html" data-lang="html">&lt;div h-html="{user.memo}">xxxxx&lt;/div&gt;</code></pre>
                </div>
                <p>渲染结果</p>
                <div class="highlight">
                    <pre class="prettyprint"><code class="language-html" data-lang="html">&lt;div h-html="{user.memo}">&lt;p&gt;个人介绍&lt;/p&gt;&lt;/div&gt;</code></pre>
                </div>

                <h2 id="js-h-remove">删除标签</h2>
                <p><code>h-remove</code> 渲染时候会删除有这个标签标识的html</p>
                <div class="highlight">
                    <pre class="prettyprint"><code class="language-html" data-lang="html">

                        &lt;ul&gt;
                        <br/>
                        &lt;li>李小璐&lt;/li&gt;
                        <br/>
                        &lt;li h-remove="">动态页面需要删除这个节点&lt;/li&gt;
                        <br/>
                        &lt;/ul&gt;

                    </code></pre>
                </div>
                <p>渲染结果</p>
                <div class="highlight">
                    <pre class="prettyprint"><code class="language-html" data-lang="html">

                        &lt;ul&gt;
                        <br/>
                        &lt;li>李小璐&lt;/li&gt;
                        <br/>
                        &lt;/ul&gt;
                    </code></pre>
                </div>


                <h2 id="js-h-if">if条件标签</h2>
                <p></p>
                <div class="highlight">
                    <pre class="prettyprint"><code class="language-html" data-lang="html">
                        &lt;div&gt;
                        <br/>
                        &lt;p h-if="{user.id==50}" h-text="用户ID等于50"&gt;xxx&lt;/p&gt;
                        <br/>
                        &lt;p>其他内容&lt;/p&gt;
                        <br/>
                        &lt;/div&gt;
                    </code></pre>
                </div>
                <p>渲染结果</p>
                <div class="highlight">
                    <pre class="prettyprint"><code class="language-html" data-lang="html">
                        &lt;div&gt;
                        <br/>
                        &lt;p>其他内容&lt;/p&gt;
                        <br/>
                        &lt;/div&gt;
                    </code></pre>
                </div>


                <h2 id="js-h-else">unless条件标签</h2>
                <p></p>
                <div class="highlight">
                    <pre class="prettyprint"><code class="language-html" data-lang="html">
                        &lt;div&gt;
                        <br/>
                        &lt;p h-if="{user.id==50}" h-text="用户ID等于50"&gt;xxx&lt;/p&gt;
                        <br/>
                        &lt;p h-unless="{user.id==50}" h-text="用户ID不等于50"&gt;xxx&lt;/p&gt;
                        <br/>
                        &lt;/div&gt;
                    </code></pre>
                </div>
                <p>渲染结果</p>
                <div class="highlight">
                    <pre class="prettyprint"><code class="language-html" data-lang="html">
                        &lt;div&gt;
                        <br/>
                        &lt;p h-unless="{user.id==50}" h-text="用户ID不等于50"&gt;用户ID不等于50&lt;/p&gt;
                        <br/>
                        &lt;/div&gt;
                    </code></pre>
                </div>



                <h2 id="js-h-switch">switch条件标签</h2>
                <p></p>
                <div class="highlight">
                    <pre class="prettyprint"><code class="language-html" data-lang="html">
                        &lt;p h-switch="{user.id}"&gt;
                        <br/>
                        &lt;input type="text" h-case="20" h-val="{user.email}"/&gt;
                        <br/>
                        &lt;input type="text" h-case="60" h-val="拉拉"/&gt;
                        <br/>
                        &lt;input type="text" h-case="*" h-val="丽丽"/&gt;
                        <br/>
                        &lt;/p&gt;

                    </code></pre>
                </div>
                <p>渲染结果</p>
                <div class="highlight">
                    <pre class="prettyprint"><code class="language-html" data-lang="html">
                        &lt;p h-switch="{user.id}"&gt;
                        <br/>
                        &lt;input type="text" h-case="20" h-val="{user.email}" value="parky_18@163.com"/&gt;
                        <br/>
                        &lt;/p&gt;
                    </code></pre>
                </div>

                <h2 id="js-h-each">each遍历标签</h2>

                <p>
                    <code>t:each</code>属性用于迭代循环，语法：<code>th:each="obj,iterStat:{objList}"</code>

                    迭代对象可以是Java.util.List,java.util.Map,数组等;
                    <br/>
                    <code>iterStat</code>称作状态变量，如果没有显示设置状态变量，会默 认给个“变量名+Stat"的状态变量。属性有：
                    <br/>
                    <code>index</code>:当前迭代对象的index（从0开始计算）
                    <br/>
                    <code>count</code>: 当前迭代对象的index(从1开始计算)
                    <br/>
                    <code>size</code>:被迭代对象的大小
                    <br/>
                    <code>current</code>:当前迭代变量
                    <br/>
                    <code> even/odd</code>:布尔值，当前循环是否是偶数/奇数（从0开始计算）
                    <br/>
                    <code>first</code>:布尔值，当前循环是否是第一个
                    <br/>
                    <code>last</code>:布尔值，当前循环是否是最后一个

                </p>
                <div class="highlight">
                    <pre class="prettyprint"><code class="language-html" data-lang="html">
                        &lt;p&gt;遍历List例子&lt;/p&gt;
                        <br/>
                        &lt;ul&gt;
                        <br/>
                        &lt;li h-each="user,userStat : {users}" h-text="{userStat.index+1}---{user.email}"&gt;李小璐&lt;/li&gt;
                        <br/>
                        &lt;/ul&gt;

                        <p/>
                        &lt;p&gt;遍历map例子&lt;/p&gt;
                        <br/>
                        &lt;ul&gt;
                        <br/>
                        &lt;li h-each="item : {user}" h-text="{item.key}:{item.value}"&gt;李小璐&lt;/li&gt;
                        <br/>
                        &lt;/ul&gt;
                        <p/>
                        &lt;p&gt;遍历map例子2&lt;/p&gt;
                        <br/>
                        &lt;ul&gt;
                        <br/>
                        &lt;li h-each="item : {{name:'lala',age:25}}" h-text="{item.key}:{item.value}"&gt;李小璐&lt;/li&gt;
                        <br/>
                        &lt;/ul&gt;

                        <p/>
                        &lt;p&gt;遍历数组例子&lt;/p&gt;
                        <br/>
                        &lt;ul&gt;
                        <br/>
                        &lt;li h-each="item : {users}" h-text="{itemStat.index}:{item}"&gt;李小璐&lt;/li>&gt;
                        <br/>
                        &lt;/ul&gt;
                        <p/>
                        &lt;p&gt;遍历数组例子2&lt;/p&gt;
                        <br/>
                        &lt;ul&gt;
                        <br/>
                        &lt;li h-each="item : {['lala','lulu']}" h-text="{itemStat.index}:{item}"&gt;李小璐&lt;/li&gt;
                        <br/>
                        &lt;/ul&gt;


                    </code></pre>
                </div>
                <p>渲染结果详细看例子:</p>
                <p> <a target="_blank" href="../examples/each_list.html">遍历list例子</a></p>
                <p> <a target="_blank" href="../examples/each_map.html">遍历map例子</a></p>
                <p> <a target="_blank" href="../examples/each_array.html">遍历数组例子</a></p>
                <p> <a target="_blank" href="../examples/each_nest_list.html">遍历嵌套list例子</a></p>

                <h2 id="js-h-on">事件绑定标签h-on</h2>
                <p>通过这个标签可以给元素绑定事件</p>
                <div class="highlight">
                    <pre class="prettyprint">
                        <code class="language-html" data-lang="html">
                        &lt;p h-on="click={xx},mouseout={xx}"&gt;
                            点击我
                        &lt;/p&gt;
                        </code>
                         </pre>
                </div>

                <div class="highlight">
                    <pre class="prettyprint">
                          <code class="language-js" data-lang="js">
                              $.domTemplate.init({'data':{xx:function(){debugger;alert("点击了");}}});
                          </code>
                    </pre>
                </div>
                <p> <a target="_blank" href="../examples/test_on.html">事件绑定例子</a></p>
                <h2 id="js-h-custom-tag">自定义标签</h2>
                <p></p>
                <div class="highlight">
                    <pre class="prettyprint"><code class="language-js" data-lang="js">

                        $.domTemplate.registerTag('tagName',function(ctx,name,exp){
                        });
                        //tagName 是自定义标签名称，用时要加上前缀，如定义'test'标签，用时h-test=""
                    </code></pre>
                </div>
                <p>用法</p>
                <div class="highlight">
                    <pre class="prettyprint"><code class="language-html" data-lang="html">
                        &lt;input type="text" h-tagName="{user.username}" /&gt;
                    </code></pre>
                </div>
                <p> <a target="_blank" href="../examples/custom_tag.html">示例下载</a> </p>
                <h3 >参数</h3>
                <div class="table-responsive">
                    <table class="table table-bordered table-striped js-options-table">
                        <thead>
                        <tr>
                            <th>Name</th>
                            <th>Type</th>
                            <th>Default</th>
                            <th>Description</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>ctx</td>
                            <td>Context</td>
                            <td></td>
                            <td>上下文，一般会用到 <a href="#js-ctx-options">ctx.options</a>、渲染表达式函数：<code>ctx.compile(exp)</code>和模板渲染函数：<code>ctx.tpl(exp)</code></td></td>
                        </tr>
                        <tr>
                            <td>name</td>
                            <td>string</td>
                            <td></td>
                            <td>标签名称</td>
                        </tr>
                        <tr>
                            <td>exp</td>
                            <td>string</td>
                            <td></td>
                            <td>标签值</td>
                        </tr>
                        <tr>
                        </tbody>
                    </table>
                </div>

                <h2 id="js-h-string">字符串拼接运算</h2>
                <div class="highlight">
                    <pre class="prettyprint"><code class="language-html" data-lang="html">
                        &lt;p h-text="用户类型:{user.type}-{user.email}"&gt;xxx1&lt;/p&gt;

                    </code></pre>
                </div>
                <p>渲染结果</p>
                <div class="highlight">
                    <pre class="prettyprint"><code class="language-html" data-lang="html">
                        &lt;p h-text="用户类型：{user.type}-{user.email}"&gt;用户身份:uType-parky_18@163.com&lt;/p&gt;
                    </code></pre>
                </div>

                <h2 id="js-h-other-operation">其他算术运算</h2>
                <div class="highlight">
                    <pre class="prettyprint"><code class="language-html" data-lang="html">
                        &lt;p h-text="{user.id-user.id}"&gt;xxx1&lt;/p&gt;

                    </code></pre>
                </div>
                <p>渲染结果</p>
                <div class="highlight">
                    <pre class="prettyprint"><code class="language-html" data-lang="html">
                        &lt;p h-text="{user.id-user.id}"&gt;0&lt;/p&gt;
                    </code></pre>
                </div>

                <h2 id="js-custom-function">自定义函数</h2>
                <p>可以通过<code>$.domTemplate.registerHelper('functionName',function)</code>添加自定义函数，实例:</p>

                <div class="highlight">
                    <pre class="prettyprint"><code class="language-html" data-lang="html">
                        &lt;p h-text="{dateFormat(user.createTime,'yyyy-MM-dd hh:mm:ss')}">xxx1&lt;/p&gt;

                    </code></pre>
                </div>
                <p>渲染结果</p>
                <div class="highlight">
                    <pre class="prettyprint"><code class="language-html" data-lang="html">
                        &lt;p h-text="{dateFormat(user.createTime,'yyyy-MM-dd hh:mm:ss')}">2016-05-30 11:20:42&lt;/p&gt;
                    </code></pre>
                </div>
                <p>自定义函数示例</p>

                <div class="highlight">
                    <pre class="prettyprint"><code class="language-html" data-lang="html">
                        $.domTemplate.registerHelper('toPrefix', function (value) {
                        return 'test:'+value;
                        });

                    </code></pre>
                </div>

                <p>用法</p>
                <div class="highlight">
                    <pre class="prettyprint"><code class="language-html" data-lang="html">
                        &lt;p h-text="{toPrefix(user.email)}">xxx1&lt;/p&gt;

                    </code></pre>
                </div>
                <p>渲染结果</p>
                <div class="highlight">
                    <pre class="prettyprint"><code class="language-html" data-lang="html">
                        &lt;p h-text="{toPrefix(user.email}">test:parky_18@163.com&lt;/p&gt;
                    </code></pre>
                </div>
                <p> <a target="_blank" href="../examples/custom_function.html">示例下载</a> </p>


                <h2 id="js-h-demo">例子</h2>
                <p><a target="_blank" href="../examples/test.html"> 例子</a></p>
                <p><a target="_blank" href="../examples/news.html"> 新闻App</a></p>
                <p><a target="_blank" href="../examples/images_lazyload.html">图片懒加载和渲染成功回调例子</a></p>

            </div>

        </div>

        <div class="col-md-3" role="complementary">
            <nav class="docs-sidebar hidden-print hidden-xs hidden-sm affix">
                <ul class="nav docs-sidenav">

                    <li>
                        <a href="#js-h-over">概述</a>
                    </li>
                    <li>
                        <a href="#js-h-user">用法</a>
                    </li>
                    <li>
                        <a href="#js-h-model">model标签</a>
                    </li>
                    <li>
                        <a href="#js-h-reload-model">刷新model标签</a>
                    </li>
                    <li>
                        <a href="#js-h-attr">attr标签</a>
                    </li>
                    <li>
                        <a href="#js-h-other">其他属性标签</a>
                    </li>
                    <li>
                        <a href="#js-h-html">html标签</a>
                    </li>
                    <li>
                        <a href="#js-h-remove">删除标签</a>
                    </li>

                    <li>
                        <a href="#js-h-if">if条件标签</a>
                    </li>
                    <li>
                        <a href="#js-h-else">unless条件标签</a>
                    </li>
                    <li>
                        <a href="#js-h-switch">switch条件标签</a>
                    </li>
                    <li>
                        <a href="#js-h-each">each遍历标签</a>
                    </li>
                    <li>
                        <a href="#js-h-on">事件绑定标签h-on</a>
                    </li>
                    <li>
                        <a href="#js-h-custom-tag">自定义标签</a>
                    </li>
                    <li>
                        <a href="#js-h-string">字符串拼接运算</a>
                    </li>
                    <li>
                        <a href="#js-h-other-operation">其他算术运算</a>
                    </li>
                    <li>
                        <a href="#js-custom-function">自定义函数</a>
                    </li>
                    <li>
                        <a href="#js-h-demo">例子</a>
                    </li>


                </ul>
                <a class="back-to-top" href="#top">
                    返回顶部
                </a>


            </nav>
        </div>

    </div>
</div>


<!-- Bootstrap core JavaScript
================================================== -->
<script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>

<script src="http://cdn.bootcss.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

<script src="js/prettify.js"></script>
